<template>
  <div class="lineEcharts" >
    <div :id="elId" :style="{'height':height}"></div>
  </div>
</template>
<script>
  let echarts = require('echarts/lib/echarts')
  // 引入饼状图组件
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  //引入uuid文件
  import uuidv1 from 'uuid/v1'
  export default {
    name: 'ageEchartss',
    props: {        //接受父组件传递来的数据
      items : {
        type: Array,
        default() {    //默认数据，没有数剧的情况下启用
          return [{ date: '7/5', value: 6 }, { date: '7/6', value: 7 }, { date: '7/7', value: 3 }, { date: '7/8', value: 5 }, { date: '7/9', value: 2 }, { date: '7/10', value: 10 }, { date: '7/11', value: 20 }]
        }
      },
      name : {
        type: String ,
        default: 'ICU患者收治率'  //默认数据，没有数剧的情况下启用
      },
      height: {
        type: String,
        default: '100%'  
      },
      reference: {  //参考值
        type: Array
      }
    },
    data() {
      return {
        elId: '',
        xDatas: [],
      }
    },
    watch: {
      items: {
        handler(curVal, oldVal) { //监听数据是否改变
          //console.log(curVal)  //新值
          this.xData();
          this.drawAge();
        },
      },
      height: {
        handler(curVal, oldVal) { //监听数据是否改变
          this.$router.push({
            path: '/emptyPage',
            query: { scoreName: this.$route.query.scoreName}
          })
          this.xData();
          this.drawAge();
        }
      }
    },
    created() {
      this.elId = uuidv1() //获取随机id
      this.xData()
    },
    mounted() {
      this.drawAge();
    },
    methods: {
      drawAge() {
        let values = [] //提炼接收到的数据
        this.items.forEach(el => {
          values.push(el.value)
        })
        const option = {
          legend: {// 对应series的name
            data: name
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '10%',
            containLabel: true
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              axisLabel: {
                formatter: this.items.date
              },
              data: this.xDatas,
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              data:this.items,
              name: '值',

            }
          ],
          series: [{
            name: this.name,
            type: 'line',
            markLine: {   //参考线
              silent: true,
              data: this.reference
            },
            smooth: true,
            itemStyle: {  //设置折线的颜色
              normal: {
                lineStyle: {
                  shadowColor: 'rgba(0,0,0,0.4)'
                }
              }
            },
            data: this.items
          }],
        }
        //初始化
        const chartObj = echarts.init(document.getElementById(this.elId));
        chartObj.setOption(option);
        window.addEventListener("resize", function () {
          chartObj.resize();
        });
      },
      xData() {
        this.xDatas = [];
        for (let i = 0; i < this.items.length; i++) {
          this.xDatas.push(this.items[i].date);
        }
        //console.log(this.xDatas)
      },
    },
   

  }
</script>
<style scoped>
  .lineEcharts > div {
    width: 100%;
    min-height: 200px;
    height:100%;
    box-sizing: border-box;
  }
</style>
